<script setup lang="ts" name="serve">
import FooterNav from "@/components/FooterNav.vue";
import HeaderNav from "@/components/HeaderNav.vue";
</script>

<template>
  <div class="my_warp app_content">

    <!-- 导航栏 -->
    <div class="header_body">
      <header-nav :leftArrow="false" titelText="服务"></header-nav>
    </div>

    <!-- 中间 -->
    <div class="warp_body">
      <div class="swipe-box">
        <van-swipe style="height: 200px;">
          <van-swipe-item>1</van-swipe-item>
          <van-swipe-item>2</van-swipe-item>
          <van-swipe-item>3</van-swipe-item>
          <van-swipe-item>4</van-swipe-item>
        </van-swipe>
      </div>

      <div style="margin: 10px">
        <van-grid :gutter="10" direction="horizontal" :column-num="3">
          <van-grid-item icon="records-o" text="大陆传音" to="/serve/publicity" />
          <van-grid-item icon="photo-o" text="文字" />
          <van-grid-item icon="photo-o" text="文字" />
          <van-grid-item icon="photo-o" text="文字" />
        </van-grid>
      </div>
    </div>

    <!-- 底部 -->
    <div class="footer_body">
      <footer-nav></footer-nav>
    </div>
  </div>
</template>

<style scoped lang="less">
.app_content {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background-color: #f4f4f4;
  .swipe-box {
    position: relative;
    margin: 10px;
    padding: 10px 20px 10px 10px;
    background: #fff;
    border-radius: 6px;
    font-size: 14px;
    color: #aaa;
  }
}
</style>
